<template>
  <div class="home-a">
    <div class="banner">
      <img
        src="@/assets/img/home/banner.jpg"
        alt=""
        class="bg"
        ondragstart="return false"
      />
      <div class="banner-title">
        <!-- <img
          src="@/assets/img/home/banner-title.png"
          alt=""
          ondragstart="return false"
        /> -->
        <p class="b-title">科技情报智能平台</p>
        <p class="tip">
          科技要素的“千里眼”，科技动态的“顺风耳”，科技研判的“智慧大脑”
        </p>
      </div>
      <div class="search-bar">
        <div class="sb-con">
          <p class="search-type">
            <span
              v-for="(item, index) in searchTypeOptions"
              :key="index"
              :class="{ active: searchType === item.value }"
              @click="handleChangeSearchType(item)"
              >{{ item.name }}</span
            >
          </p>
          <el-input
            placeholder="请输入搜索关键词"
            v-model="keyword"
            class="search-inp"
            @keydown.enter.native="search"
            @input="checkInp"
          >
            <span
              slot="append"
              class="el-icon-search search-btn"
              @click="search"
            ></span>
          </el-input>
          <el-button type="primary" class="search-btn2" @click="search"
            >检索</el-button
          >
          <p class="tip">{{ errTip }}</p>
        </div>
      </div>
    </div>
    <div class="panel2">
      <div class="container">
        <h4>
          <p class="zh">科技大数据中心</p>
          <p class="en">SCIENCE AND TECHNOLOGY CENTER FOR BIG DATA</p>
        </h4>
        <p class="abst">
          大数据中心拥有5849万+数据量，其中包括专利数据、论文数据、成果数据、标准数据等，能源数据企业画像、人才画像等，能源行业政策数据、资讯数据等海量数据。
        </p>
        <dl class="data-amount">
          <dd v-for="(item, index) in dataAmountData" :key="index">
            <div class="l">
              <img
                v-if="index == 0"
                src="../../../assets/img/home-c-zl.png"
                alt=""
              />
              <img
                v-if="index == 1"
                src="../../../assets/img/home-c-lw.png"
                alt=""
              />
              <img
                v-if="index == 2"
                src="../../../assets/img/home-c-fm.png"
                alt=""
              />
              <img
                v-if="index == 3"
                src="../../../assets/img/home-c-bz.png"
                alt=""
              />
              <img
                v-if="index == 4"
                src="../../../assets/img/home-cqy.png"
                alt=""
              />
              <img
                v-if="index == 5"
                src="../../../assets/img/home-c-zj.png"
                alt=""
              />
              <img
                v-if="index == 6"
                src="../../../assets/img/home-c-cy.png"
                alt=""
              />
              <img
                v-if="index == 7"
                src="../../../assets/img/home-c-zx.png"
                alt=""
              />
            </div>
            <div class="r">
              <h5>{{ item.name }}</h5>
              <p>
                <span>{{ item.amount }}</span
                ><i>{{ item.unit }}+</i>
              </p>
            </div>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: "",
      searchType: "patent",
      routerName: "DCMain",
      searchTypeOptions: [
        { name: "专利", value: "patent", router: "DCMain" },
        { name: "论文", value: "paper", router: "DCMain" },
        { name: "成果", value: "achieve", router: "DCMain" },
        { name: "标准", value: "standard", router: "DCMain" },
        { name: "企业", value: "company", router: "EISearchResult" },
        { name: "人才", value: "person", router: "PD" },
        { name: "行业动态", value: "consult", router: "Consult" },
      ],
      errTip: "",
      dataAmountData: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.dataAmountData = [
        { name: "专利数据", amount: "4290", unit: "万" },
        { name: "论文数据", amount: "260", unit: "万" },
        { name: "成果数据", amount: "18", unit: "万" },
        { name: "标准数据", amount: "21", unit: "万" },
        { name: "企业画像", amount: "275", unit: "万" },
        { name: "人才画像", amount: "955", unit: "万" },
        { name: "政策数据", amount: "2", unit: "万" },
        { name: "资讯数据", amount: "28", unit: "万" },
      ];
    },
    search() {
      if (this.keyword == "") {
        this.errTip = "请先输入检索关键词";
        return;
      } else {
        this.errTip = "";
      }
      if (this.routerName == "DCMain") {
        this.$store.commit("setSearchWord", this.keyword);
        this.$router.push({
          name: this.routerName,
          query: {
            type: this.searchType,
          },
        });
      } else if (this.routerName == "EISearchResult") {
        this.$router.push({
          name: this.routerName,
          params: {
            keyword: this.keyword,
            searchTypeName: "企业名称",
            searchType: "1",
            ipi: 1,
          },
        });
      } else if (this.routerName == "PD") {
        this.$router.push({
          name: this.routerName,
          query: {
            domain: this.keyword,
          },
        });
      } else if (this.routerName == "Consult") {
        this.$router.push({
          name: this.routerName,
          query: {
            type: 1,
            keyword: this.keyword,
          },
        });
      }
    },
    checkInp(val) {
      if (val !== "") {
        this.errTip = "";
      }
    },
    handleChangeSearchType(item) {
      this.searchType = item.value;
      this.routerName = item.router;
    },
  },
};
</script>

<style lang="scss" scoped>
.home-a {
  position: relative;
  width: 100%;
  .banner {
    position: relative;
    width: 100%;
    .bg {
      display: block;
      width: 100%;
    }
    .banner-title {
      position: absolute;
      top: 1.88rem;
      left: 0;
      // align-items: center;
      // justify-content: center;
      width: 100%;
      text-align: center;
      img {
        display: inline-block;
        height: 0.85rem;
        margin-bottom: 0.25rem;
      }
      .b-title {
        font-size: 0.8rem;
        letter-spacing: 0.16rem;
        text-indent: 0.06rem;
        color: #fff;
        font-weight: bold;
        margin-bottom: 20px;
      }
      .tip {
        font-size: 0.3rem;
        letter-spacing: 0.06rem;
        text-indent: 0.06rem;
        color: $color107;
      }
    }
    .search-bar {
      position: absolute;
      top: 5.41rem;
      left: 50%;
      margin-left: -4.785rem;
      // background-color: $color110;
      // padding: 100px 0;
      // display: flex;
      // justify-content: center;
      .search-inp {
        width: 8.05rem;
        height: 0.6rem;
        margin-right: 0.2rem;
        vertical-align: middle;
        ::v-deep {
          ::placeholder {
            color: rgba(254, 254, 254, 0.5) !important;
            // color: red !important;
          }
          .el-input__inner {
            // height: .5rem;
            height: initial;
            line-height: 0.6rem;
            border-right: 0;
            border-color: $color21;
            border-top-left-radius: 6px;
            border-top-right-radius: 0;
            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 0;
            // font-family: SourceHanSansCN-Regular;
            font-size: 0.2rem;
            color: $color20;
            background-color: transparent;
          }
          .el-input-group__append {
            width: 0.6rem;
            padding-right: 0.25rem;
            border-top-right-radius: 6px;
            border-bottom-right-radius: 6px;
            box-sizing: border-box;
            text-align: center;
            background-color: transparent;
            .search-btn {
              display: block;
              width: 100%;
              text-align: center;
              font-size: 0.24rem;
              color: $color2;
            }
          }
        }
      }
      .search-btn2 {
        width: 1.3rem;
        height: 0.62rem;
        padding: 0;
        // padding-left: .21rem;
        border-color: $mainColor;
        border-radius: 6px;
        box-sizing: border-box;
        // font-family: SourceHanSansCN-Regular;
        font-size: 0.22rem;
        letter-spacing: 1px;
        color: $color17;
        vertical-align: middle;
        background-color: $mainColor;
        &:hover {
          background-color: rgba(3, 179, 140,0.6);
        }
      }
      .search-type {
        line-height: 0.48rem;
        padding-left: 0.1rem;
        margin-bottom: 0.14rem;
        font-size: 0.22rem;
        color: $color20;
        span {
          display: inline-block;
          margin-right: 0.24rem;
          cursor: pointer;
          &.active {
            // font-size: .26rem;
            color: $mainColor;
          }
        }
      }
      .tip {
        line-height: 0.3rem;
        font-size: 0.14rem;
        color: $color81;
      }
    }
  }

  .panel2 {
    position: relative;
    background-color: $color110;;
    // .bg {
    // display: block;
    width: 100%;
    height: 6rem;
    margin-top: -550px;
    // }
    .container {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      width: 100%;
      height: 6.5rem;
      padding: 50px 2.8rem 0;
      box-sizing: border-box;
      h4 {
        position: relative;
        width: 100%;
        height: 0.56rem;
        margin-bottom: 0.3rem;
        text-align: center;
        p {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          // font-family: SourceHanSansCN-Bold;
          font-weight: normal;
          text-align: center;
        }
        .zh {
          z-index: 2;
          line-height: 0.57rem;
          margin-top: 0.22rem;
          font-size: 0.3rem;
          color: $color107;
        }
        .en {
          z-index: 1;
          line-height: 0.56rem;
          font-size: 0.53rem;
          text-transform: uppercase;
          color: rgba(146, 143, 152, 0.4);
        }
      }
      .abst {
        position: absolute;
        top: 2.5rem;
        left: 16.1%;
        width: 17%;
        line-height: 0.38rem;
        // font-family: SourceHanSansCN-Light;
        font-size: 0.2rem;
        letter-spacing: 1px;
        color: $color31;
        &:before {
          position: absolute;
          bottom: -0.1rem;
          right: 0.1rem;
          width: 0.34rem;
          height: 0.05rem;
          content: "";
          background-color: $mainColor;
        }
      }
      .data-amount {
        position: absolute;
        top: 2rem;
        left: 36.4%;
        display: flex;
        flex-wrap: wrap;
        width: 52%;
        dd {
          width: 33.3333%;
          margin-bottom: 6.8%;
          display: flex;
          .l {
            width: 50%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            img {
              width: 50px;
            }
          }
          .r {
            width: 50%;
            h5 {
              line-height: 0.3341rem;
              padding-left: 17%;
              // font-family: SourceHanSansCN-Light;
              font-size: 0.18rem;
              color: $color109;
            }
            p {
              line-height: 0.3341rem;
              padding-left: 17%;
              color: $mainColor;
              span {
                display: inline-block;
                font-size: 0.38rem;
                vertical-align: middle;
              }
              i {
                display: inline-block;
                font-size: 0.23rem;
                vertical-align: middle;
              }
            }
          }
        }
      }
    }
  }
}
</style>
